<template>
    <view class="wrap">
        <u-empty text="暂无我的留言" mode="message" v-if="!messageList.length"></u-empty>
        <view class="" v-else>
            <scroll-view class="" v-for="(item,index) in messageList" :key="item._id" scroll-y>
                <view class="box" :style="[getBgColor(index * Math.floor(Math.random() * 2))]">
                    <view class="title">
                        <image :src="item.avatarUrl" mode=""></image>
                        <text class="name">{{item.nickName}}</text>
                    </view>
                    <view class="text">{{item.content}}</view>
                    <view class="time">{{$u.timeFormat(item.createTime, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    import {
        mapGetters
    } from 'vuex';
    import * as cloudApi from '@/utils/cloudApi.js'
    export default {
        data() {
            return {
                messageList: [],
                userInfo: {}
            }
        },
        computed: {
            ...mapGetters('common', ['getBgColor']),
        },
        onLoad() {
            this.userInfo = uni.getStorageSync("userInfo") || getApp().globalData.userInfo
            console.log(this.userInfo);
            cloudApi.call({
                name: "Message-Board",
                data: {
                    api: 'getMyMessage',
                    token: this.userInfo.token
                },
                success: (res) => {
                    this.messageList = res.result.data
                }
            })
        },
        methods: {

        }
    }
</script>

<style lang="scss" scoped>
    .box {
        margin: 10rpx 40rpx;
        padding: 20rpx;

        border-radius: 30rpx;

        .title {
            display: flex;
            align-items: center;

            image {
                width: 100rpx;
                height: 100rpx;
                border: 5rpx solid #fff;
                border-radius: 50%;
                margin-right: 20rpx;
            }

            .name {
                color: #ff6773;
                font-weight: bold;
                font-size: 40rpx;
                display: block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 40vw;
            }
        }

        .text {
            padding: 30rpx 40rpx 0;

        }

        .time {
            margin-top: 10rpx;
            font-size: 24rpx;

        }
    }
</style>
